<template>
	<view>
		<view class="top-img">
			<!-- <view class="title">我的</view> -->
			<image src="/static/mine/top-img.png"></image>
			<view class="head" v-if="info==''">
				<image src="/static/mine/head.png"></image>
				<view>微信用户</view>
			</view>
			<view class="head" v-else>
				<image :src="info.avatar"></image>
				<view>{{info.nickname}}</view>
			</view>
		</view>
		<view class="cell">
			<view class="flex align between cell-item" style="border-bottom: solid 1rpx #F5F6FA;" @click="toUrl('/pages/service/service')">
				<view class="flex align">
					<u-icon name="phone" color="#3270B6" size="28"></u-icon>
					<view>联系我们</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flex align between cell-item" style="border-bottom: solid 1rpx #F5F6FA;" @click="toUrl('/pages/suggest/suggest')">
				<view class="flex align">
					<u-icon name="edit-pen" color="#F3BD08" size="28"></u-icon>

					<!-- <image src="/static/mine/icon.png"></image> -->
					<view>问题反馈</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flex align between cell-item" style="border-bottom: solid 1rpx #F5F6FA;" @click="toUrl('/pages/suggest/list')">
				<view class="flex align">
					<u-icon name="file-text" color="#3270B6" size="28"></u-icon>
					<view>反馈列表</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="flex align between cell-item" @click="toHref()">
				<view class="flex align">
					<u-icon name="calendar" color="#12D5B4" size="28"></u-icon>
					<view>我的预约</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 底部导航 -->
		<view class="btom-view">
			<image src="/static/nav/btom1.png" class="btom-bg"></image>
			<!-- <view class="btom-black"></view> -->
			<view class="bto-item" @click="toUrl('/pages/index/index')">
				<image src="/static/nav/nav1.png"></image>
				<view>首页</view>
			</view>
			<view class="bto-item bto-item2" @click="toUrl('/pages/map/map')">
				<image src="/static/nav/nav2.png"></image>
				<view>文旅地图</view>
			</view>
			<view class="bto-item bto-item3 bto-item-a">
				<image src="/static/nav/nav3-a.png"></image>
				<view>我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wechatLogin,
		userDetail,
		config
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				info: '',
				appid:'',
				ws: null,
				path: '/pages/mine/mine'
			};
		},
		onLoad() {
			const type = uni.getSystemInfoSync().uniPlatform
			if (type == 'mp-weixin') {
				console.log('在小程序内');
			} else {
				this.getInfo()
				// this.checkWeChatCode()
			}
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					//console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path: that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			async getConfig(){
				const result = await config()
				if(result.code==1){
					this.appid = result.data.appId
					this.checkWeChatCode()
				}else{
					
				}
			},
			async getInfo() {
				const result = await userDetail()
				if (result.code == 10000 || result.code == 20003) {
					this.getConfig()
					// this.wxLogin()
				} else if (result.code == 1) {
					this.info = result.data
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			wxLogin() {
				let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址
				let appid = this.appid
				//通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
				let href = "https://ncymkj.doudou00.com/get-weixin-code.html?appid=" + appid +
					"&response_type=code&scope=snsapi_userinfo&state=123456&redirect_uri=" + local + "#wechat_redirect"
				console.log(href)
				window.location.href = href
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				console.log(code)
				if (code) {
					// uni.showToast({
					// 	title: `微信code=${code}`
					// })
					this.getOpenidAndUserinfo(code)
				}else{
					this.wxLogin()
					// this.getInfo()
				}
			},
			//方法：用来判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
				[, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			async getOpenidAndUserinfo(code) {
				this.show = true
				const result = await wechatLogin({
					code: code
				})
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
					this.sendData({
						type: 'user_auth',
						token: result.data.token,
					});
				} else {
					// uni.showToast({
					// 	title: result.msg,
					// 	icon: 'error'
					// });
				}
			},
			toUrl(u) {
				uni.navigateTo({
					url: u
				})
			},
			toHref(){
				window.location.href='https://gxtravel.ncscloudmedia.com/gxyy/#/bookList2'
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.top-img {
		position: relative;

		image {
			width: 100%;
			height: 400rpx;
		}

		.title {
			width: 100%;
			text-align: center;
			color: white;
			left: 0;
			top: 50rpx;
			position: absolute;
			z-index: 2;
		}

		.head {
			position: absolute;
			text-align: center;
			font-size: 32rpx;
			color: white;
			top: 100rpx;
			left: 50%;
			margin-left: -60rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}
	}

	.cell {
		background: white;
		position: relative;
		margin: 0 60rpx;
		top: -70rpx;
		border-radius: 20rpx;

		.cell-item {
			padding: 16rpx 24rpx;
			font-size: 28rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
	}
</style>